<template>
  <div class="demo-title">tabs/demo1</div>
  <Tabs v-model="tabKey" @click="onClick" @change="onChange">
    <TabPane pane-key="tab1" title="pc端">
      <p>Content 1</p>
    </TabPane>
    <TabPane pane-key="tab2" title="移动端">
      <p>Content 2</p>
    </TabPane>
    <TabPane pane-key="tab3" title="小程序端">
      <p>Content 3</p>
    </TabPane>
  </Tabs>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  import { Tabs, TabPane } from '@sscd-mobile/tabs'
  const tabKey = ref('tab1')
  const onClick = (e) => console.log('onClick: ', e)
  const onChange = (e) => console.log('onChange: ', e)
</script>

<style lang="less" scoped>
  p {
    padding: 12px 12px 0;
    line-height: 80px;
  }
</style>
